<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>确认订单</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
		<style type="text/css">
			.itemAddress {
				width: 16.25rem;
				height: 8.75rem;
				margin-top: 0.625rem;
				background: url(img/item_bk_un.png);
				background-size: 100% 100%;
				display: flex;
				float: left;
				margin-right: 2.5rem;
				position: relative;
			}

			.itemChoi {
				background: url(img/item_bk.png);
				background-size: 100% 100%;
			}

			.dotted {
				padding: 0.125rem;
				border: 1px dashed transparent;
				background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #FF540F 0, #FF540F 0.25em, white 0, white 0.75em)
			}

			.botText {
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: rgba(255, 255, 255, 1);
				opacity: 0.25;
				height: 1.5rem;
				line-height: 1.5rem;
			}
		</style>
	</head>
	<body>
		<!-- 最顶部 -->
		<div id="top">
			<div class="leftAndRight" id="topContent">
				<div class="divRow divColumnCenter">
					<img src="img/home1.png" />
					<span>您好，欢迎来到村里村外~</span>
				</div>
				<div class="divRow divColumnCenter">
					<a href="#">登录</a>
					<a class="divColumnCenter" href="#">
						<img src="img/home2.png" />
						<span>注册</span>
					</a>
					<a href="#">我们的村子</a>
					<a href="#">手机版</a>
					<a href="#">关注村子</a>
					<a class="divColumnCenter" href="#">
						<span>村委会/社区</span>
					</a>
				</div>
			</div>
		</div>
		<div style="width: 100%;" class="divCenter" id="content">
			<div style="width: 75rem;" class="divColumn">
				<!-- 顶部标题及搜索 -->
				<div style="width: 100%;height: 6.25rem;" class="leftAndRight">

					<div class="divRow divColumnCenter">
						<img src="img/logo.png" />
						<h2 style="margin-left: 1.25rem;">购物车</h2>
					</div>
					<div style="width:25rem;height: 2.625rem;" class="divRow">
						<input style="width: 70%;height: 100%;border: 0.0625rem solid #007D36;padding: 0rem 0.625rem;" />
						<span style="width: 30%;height: 104%;background: #007D36;line-height: 2.625rem;text-align: center;color: white;">
							搜索
						</span>
					</div>
				</div>
				<div id='progress' style='width: 100%;margin-top: 3.75rem;'>
					<el-steps :active="active" finish-status="success">
						<el-step title="查看购物车"></el-step>
						<el-step title="拍下商品"></el-step>
						<el-step title="付款"></el-step>
						<el-step title="确认收货"></el-step>
						<el-step title="客户评价"></el-step>
					</el-steps>
				</div>
				<!-- 选择收货地址-->
				<div id="choiceAdd" style='width: 100%;margin-top: 1.875rem;'>
					<div class='leftAndRight'>
						<h2>选择收货地址</h2>
						<h3 style='color: #CC9977;cursor: pointer;'>管理收货地址</h3>
					</div>
					<div style='width: 100%;'>
						<div class='itemAddress divColumn' v-for='(item,index) in adList' :class='{itemChoi:item.isChoice}'>
							<div style='width: 100%;padding: 0rem 1.25rem;margin-top: 1rem;' class='divRow'>
								<h3>湖南长沙</h3>
								<h4 style='margin-left: 0.625rem;'>（刘某某 收）</h4>
							</div>
							<div style='margin-left: 1.25rem;margin-right: 1.25rem;background: #F0F0F0;height: 0.125rem;margin-top: 0.625rem;'>
							</div>
							<span style='margin: 0.625rem 1.25rem;font-weight: 600;'>
								岳麓 岳麓 西二环望兴景园一栋3单元2 07号 13087572944
							</span>
							<span style='margin-left: 1.25rem;color: #CC9977;font-weight: 600;cursor: pointer;'>
								修改
							</span>
							<div style='position: absolute;bottom: -0.2rem;right: 0rem;'>
								<img src="img/ad_choice.png" v-if='item.isChoice'>
								<img src="img/ad_unChoice.png" v-if='!item.isChoice'>
							</div>
							<span style='width:58px;height:23px;background:rgba(219,219,219,1);opacity:0.88;color: white;position: absolute;top: 0rem;right: 0rem;text-align: center;'>默认地址</span>
						</div>
					</div>
				</div>
				<!-- 确认订单信息 -->
				<div style='width: 100%;margin-top: 2.5rem;' class='divColumn'>
					<h2>确认订单信息</h2>
					<div style='width: 100%;height: 3.25rem;' class='divRow'>
						<div style='width: 20%;height: 100%;' class='divColumn divCenter'>
							<span>店铺宝贝</span>
							<div style='width: 96%;height: 0.125rem;background: #007D36;'>
							</div>
						</div>
						<div style='width: 15%;height: 100%;' class='divColumn divCenter'>
							<span>商品属性</span>
							<div style='width: 96%;height: 0.125rem;background: #007D36;'>
							</div>
						</div>
						<div style='width: 15%;height: 100%;' class='divColumn divCenter'>
							<span>单价</span>
							<div style='width: 96%;height: 0.125rem;background: #007D36;'>
							</div>
						</div>
						<div style='width: 15%;height: 100%;' class='divColumn divCenter'>
							<span>数量</span>
							<div style='width: 96%;height: 0.125rem;background: #007D36;'>
							</div>
						</div>
						<div style='width: 20%;height: 100%;' class='divColumn divCenter'>
							<span>优惠方式</span>
							<div style='width: 96%;height: 0.125rem;background: #007D36;'>
							</div>
						</div>
						<div style='width: 15%;height: 100%;' class='divColumn divCenter'>
							<span>小计</span>
							<div style='width: 96%;height: 0.125rem;background: #007D36;'>
							</div>
						</div>
					</div>
					<div style='width: 100%;height: 7.5rem;border: 0.0625rem solid #F0F0F0;' class='divRow'>
						<div style='width: 20%;height: 100%;' class='divRow'>
							<div style='width: 6.25rem;height: 100%;' class='divCenter'>
								<img src="https://img11.360buyimg.com/n7/jfs/t1/24403/35/11614/94550/5c8fb608E1ceadf8b/9d60a0c0b856e464.jpg"
								 style='width: 90%;height: 80%;'>
							</div>
							<span style='width:8.75rem;margin-top: 0.625rem;'>来伊份牛肉豆干250g卤汁豆腐干素食.......
							</span>

						</div>
						<div style='width: 15%;height: 100%;' class='divCenter'>
							<span>口味：牛肉豆 250g</span>
						</div>

						<div style='width: 15%;height: 100%;' class='divCenter'>
							<span>￥188.90</span>
						</div>
						<div style='width: 15%;height: 100%;' class='divCenter'>
							<span>1</span>
						</div>
						<div style='width: 20%;height: 100%;' class='divCenter'>
							<span>省100：优惠促销</span>
						</div>

						<div style='width: 15%;height: 100%;color: #007D36;font-weight: 600;font-size: 1rem;' class='divCenter'>
							<span>188.00</span>
						</div>
					</div>

				</div>
				<!-- 支付方式 -->
				<div style='width: 100%;margin-top: 1.875rem;' class='divColumn'>
					<h2>支付方式</h2>
					<div style='width: 100%;height: 5rem;border: 0.0625rem solid #f0f0f0;margin-top: 1.25rem;' class='leftAndRight'>
						<div class='divRow divColumnCenter'>
							<div class='divRow divColumnCenter' style='margin-left: 2.5rem;cursor: pointer;'>
								<img src="img/dot_ch.png">
								<div class='divColumn divCenter'>
									<img src="img/api_pay.png">
									<span>支付宝支付</span>
								</div>
							</div>
							<div class='divRow divColumnCenter' style='margin-left: 2.5rem;cursor: pointer;'>
								<img src="img/dot_un.png">
								<div class='divColumn divCenter'>
									<img src="img/wx_pay.png">
									<span>微信支付</span>
								</div>
							</div>
							<div class='divRow divColumnCenter' style='margin-left: 2.5rem;cursor: pointer;'>
								<img src="img/dot_un.png">
								<div class='divColumn divCenter'>
									<img src="img/card_pay.png">
									<span>银联支付</span>
								</div>
							</div>
						</div>
						<div style='width: 6.25rem;height: 2rem;background: #007D36;color: white;margin-right: 1.25rem;' class='divCenter'>
							确定支付方式
						</div>
					</div>
				</div>
				<div style='width: 100%;height: 2.625rem;' class='leftAndRight'>
					<span></span>
					<div class='divRow divColumnCenter' style='margin-right: 1.25rem;'>
						<img src="img/choice.png">
						<span style='margin-left: 0.25rem;'>匿名购买</span>

					</div>
				</div>
				<div style='width: 100%;height: 0.0625rem;background: #F0F0f0;'>
				</div>

				<!-- 底部购买 -->
				<div style='width: 100%;' class='leftAndRight'>
					<span></span>
					<div style='width: 20rem;height: 6.25rem;border: 0.0625rem solid #007D36;margin-top: 1.25rem;padding-right: 1.25rem;'
					 class='divColumn divRowCenter'>
						<div style='width: 100%;' class='leftAndRight'>
							<span></span>
							<div class='divColumn'>
								<div class='divRow'>
									<h4>实付款：</h4>
									<h2 style='color: #007D36;'>¥520.00</h2>
								</div>
								<div class='divRow' style='margin-top: 0.625rem;'>
									<h4>寄送至：</h4>
									<h4 style='color: #999999;'>XXXX XXXXXXXXXXXX</h4>
								</div>
								<div class='divRow' style='margin-top: 0.625rem;'>
									<h4>收货人：</h4>
									<h4 style='color: #999999;'>XXXX XXXX</h4>
								</div>
							</div>

						</div>

					</div>
				</div>
				<div style='width: 100%;height: 2.625rem;margin-bottom: 1.25rem;' class='leftAndRight'>
					<span></span>

					<div style='width: 20rem;height: 100%;' class='divRow'>
						<div style='width: 50%;height: 100%;cursor: pointer;' class='divRow divCenter'>
							<img src="img/back.png">
							<h4 style='color: #999999;margin-left: 0.25rem;'>返回购物车</h4>


						</div>
						<div style='width: 50%;height: 100%;background: #007D36;color: white;cursor: pointer;' class='divCenter' @click="surePay()">
							<h4>提交订单</h4>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部介绍 -->
		<div style="width: 100%;15rem;background: #282633;height: 22.5rem;" class="divCenter">
			<div style="width: 75rem;height: 100%;" class="divColumn">
				<div style="width: 100%;height: 70%;" class="divRow">
					<div style="width: 60%;height: 100%;" class="divColumn">
						<div style="width: 100%;color: white;height: 3.25rem;" class="divRow divColumnCenter">
							<h3 style="width: 20%;;">公司介绍</h3>
							<h3 style="width: 20%;">购物指南</h3>
							<h3 style="width: 20%;">支付方式</h3>
							<h3 style="width: 20%;">售后服务</h3>
							<h3 style="width: 20%;">商家服务</h3>
						</div>
						<div style="height: 0.0625rem;background: #000000;width: 100%;"></div>
						<div style="width: 100%;margin-top: 0.875rem;" class="divRow">
							<div style="width: 20%;" class="divColumn">
								<span class="botText">关于村里村外</span>
								<span class="botText">企业荣誉</span>
								<span class="botText">战略合作</span>
								<span class="botText">媒体报道</span>
								<span class="botText">企业风采</span>
								<span class="botText">联系我们</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">免费注册</span>
								<span class="botText">购物流程</span>
								<span class="botText">发票制度</span>
								<span class="botText">配送说明</span>
								<span class="botText">联系客服</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">网上支付</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">验货与拒收政策</span>
								<span class="botText">退换货流程</span>
								<span class="botText">退款流程</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">招商范围</span>
								<span class="botText">商家资质要求</span>
								<span class="botText">入驻流程</span>
								<span class="botText">商家后台</span>
							</div>
						</div>

					</div>
					<div style="width: 40%;height: 100%;" class="divRow">
						<div style="margin: 1.25rem;">
							<img src="img/home17.png" />
						</div>
						<div style="margin:1.25rem 0rem;width: 60%;" class="divColumn">
							<span style="width: 60%;text-align: end;" class="botText">二十四小时咨询热线</span>
							<h1 style="color: white;">021-12454563</h1>
							<div class="divRow" style="margin-top: 0.625rem;">
								<div class="divColumn" style="width: 40%;" class="divColumn divCenter">
									<img src="img/home18.png" style="width: 100%;" />
									<span class="botText" style="text-align: center;">手机APP</span>
								</div>
								<div style="width: 10%;"></div>
								<div class="divColumn" style="width: 40%;" class="divColumn divCenter">
									<img src="img/home18.png" style="width: 100%;" />
									<span class="botText" style="text-align: center;">微信公众号</span>

								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="width: 100%;height: 0.0625rem;background: black;"></div>
				<div style="width: 100%;margin-top: 1.25rem;" class="divColumn">
					<h2 style="color: white;">湖南村里村外电子商务有限公司</h2>
					<div class="divRow divColumnCenter" style="height: 2.625rem;">
						<span class="botText">湖南长沙市XXXXXXX栋XX单元</span>
						<span class="botText" style="margin-left: 2.5rem;">Tel:05456-46546545</span>
						<span class="botText" style="margin-left: 2.5rem;">E-mail:564564654@qq.com</span>

					</div>


				</div>

			</div>


		</div>
		<script type="text/javascript">
			var content = new Vue({
				el: "#content",
				data: {
					active: 2,
					adList: [{
							isChoice: true
						}, {
							isChoice: false
						}, {
							isChoice: false
						}, {
							isChoice: false
						}

					]

				},
				methods: {
					surePay: function() {
						window.location.href = 'do_pay.html'
					}

				}
			});
		</script>




	</body>
</html>
